<template>
  <el-form ref="dateForm" :model="dateForm" label-width="150px" style="margin: 30px 100px;" :rules='dateFormRules'>
    <el-row>
      <el-form-item label="API名称" prop="title">
        <el-input v-model="dateForm.title" placeholder="取QQ头像"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="请求链接" prop="url">
        <el-input v-model="dateForm.url" placeholder="http://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=100"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="API介绍" prop="description">
        <el-input type="textarea" v-model="dateForm.description" placeholder="根据QQ号码查询对方的QQ头像"></el-input>
      </el-form-item>
    </el-row>

    <el-row>

      <el-col :span="5">
        <el-form-item label="响应格式" prop="responseFormart">
          <el-select v-model="dateForm.responseFormart" placeholder="请选择响应格式">
            <el-option label="JSON" value="JSON"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="请求方式" prop="method">
          <el-select v-model="dateForm.method" placeholder="请选择请求方式">
            <el-option label="GET/POST" value="GET/POST"></el-option>
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="请求Header" prop="requestHeads">
        <el-button size="mini" type="primary" @click="headerAddRow()">增加一行</el-button>
        <div style="height: 200px; overflow-x:auto;overflow-y:auto">
          <el-table :data="dateForm.headers" style="width: 100%; text-align: center;" border
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="paramsName" label="参数名" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-if="true" class="item" v-model="scope.row.paramsName" placeholder="参数名"></el-input>
                <div v-else class="txt">{{ scope.row.paramsName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="paramsValue" label="参数值" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-if="true" class="item" v-model="scope.row.paramsValue" placeholder="参数值"></el-input>
                <div v-else class="txt">{{ scope.row.paramsValue }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="paramsType" label="参数类型" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-if="true" class="item" v-model="scope.row.paramsType" placeholder="类型"></el-input>
                <div v-else class="txt">{{ scope.row.paramsType }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="paramsDesc" label="参数说明" align="center">
              <template slot-scope="scope">
                <el-input v-if="true" class="item" v-model="scope.row.paramsDesc" placeholder="参数说明"></el-input>
                <div v-else class="txt">{{ scope.row.paramsDesc }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="headerDelRow(scope.$index, scope.row)">删除此行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="提交内容" prop="requestBody">
        <el-tabs v-model="dateForm.requestBodyType" @tab-click="handleTabsClick">
          <p style="color: blue;">请求方式同时支持 [GET/POST] 时建议提交内容选择参数提交，前台会生成对应表格，否则是JSON文本框</p>
          <el-tab-pane label="JSON提交" name="JsonSubmit">
            <el-button size="mini" type="primary" @click="JSONFormart">JSON格式化</el-button>
            <el-input type="textarea" rows="5" v-model="dateForm.requestBody"></el-input>
          </el-tab-pane>

          <el-tab-pane label="参数提交" name="ParamsSubmit">
            <el-button size="mini" type="primary" @click="paramsAddRow()">增加一行</el-button>
            <div style="height: 200px; overflow-x:auto;overflow-y:auto">
              <el-table :data="dateForm.subParams" style="width: 100%; text-align: center;" border
                :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="paramsName" label="参数名" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input v-if="true" class="item" v-model="scope.row.paramsName" placeholder="参数名"></el-input>
                    <div v-else class="txt">{{ scope.row.paramsName }}</div>
                  </template>
                </el-table-column>

                <el-table-column prop="paramsValue" label="参数值" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input v-if="true" class="item" v-model="scope.row.paramsValue" placeholder="参数值"></el-input>
                    <div v-else class="txt">{{ scope.row.paramsValue }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="paramsType" label="参数类型" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input v-if="true" class="item" v-model="scope.row.paramsType" placeholder="类型"></el-input>
                    <div v-else class="txt">{{ scope.row.paramsType }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="paramsDesc" label="参数说明" align="center">
                  <template slot-scope="scope">
                    <el-input v-if="true" class="item" v-model="scope.row.paramsDesc" placeholder="参数说明"></el-input>
                    <div v-else class="txt">{{ scope.row.paramsDesc }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="250">
                  <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="paramsDelRow(scope.$index, scope.row)">删除此行</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
    </el-row>
    <el-row>

      <el-form-item label="接口响应" prop="responseDemo">

        <el-button size="mini" type="primary" @click="JSONFormartResp">JSON格式化</el-button>
        <p style="color: red;">建议：在响应的信息中记得添加字段表示响应的含义</p>
        <el-input type="textarea" rows="5" v-model="dateForm.responseDemo" placeholder="响应信息"></el-input>
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认添加</el-button>
        <el-button @click="onTestApi()">测试接口连通性</el-button>
      </el-form-item>
    </el-row>

  </el-form>
</template>

<script>
import { testRequest } from "@/utils/testRequest";
import { insertApiInfo } from "@/api/api-manager/addapi/addapi";
import { title } from "@/settings";

export default {
  data() {
    return {
      // 提交内容是什么方式提交
      jsonDate: null,
      // 提交表单
      dateForm: {
        id: null,
        title: '',
        url: '',
        description: '',
        method: 'GET/POST',
        responseFormart: 'JSON', // 响应方式
        requestBody: null,
        requestBodyType: 'ParamsSubmit',
        responseDemo: null,
        headers: [
          // {
          //   paramsName: null,
          //   paramsValue: null,
          //   paramsType: 'String',
          //   paramsDESC: null,
          // }
        ],
        subParams: [
          // {
          //   paramsName: null,
          //   paramsValue: null,
          //   paramsType: 'String',
          //   paramsDESC: null,
          // }
        ],


      },
      // 表单验证
      dateFormRules: {
        title: [{
          required: true,
          trigger: "blur",
          message: "API名称不能为空"
        }],
        url: [{
          required: true,
          trigger: "blur",
          message: "请求链接不能为空"
        }],
        description: [{
          required: true,
          trigger: "blur",
          message: "API介绍不能为空"
        }],
        responseFormart: [{
          required: true,
          trigger: ["blur", 'change'],
          message: "请选择响应格式"
        }],
        method: [{
          required: true,
          trigger: ["blur", 'change'],
          message: "请选择请求方式"
        }]
      },

    }
  },
  methods: {
    // 确认添加
    onSubmit() {
      this.$refs.dateForm.validate(validate => {
        if (validate) {
          const form = { ...this.dateForm, headers: JSON.stringify(this.dateForm.headers), subParams: JSON.stringify(this.dateForm.subParams) }
          insertApiInfo(form).then(response => {
            // const { message } = response
            this.$router.push({ name: 'list'});

            this.$message.success(response.message)

          }).catch(error => {
            this.$message.error("添加失败")
          })
        } else {

        }

      })

    },
    // 取消修改
    onTestApi() {
      debugger;
      this.$refs.dateForm.validate(validate => {
        this.dateForm.responseDemo = null
        if (validate) {
          const form = this.dateForm
          if (this.dateForm.requestBodyType == 'JsonSubmit') {
            testRequest(form.url, form.method, form.headers, null, JSON.parse(form.requestBody)).then(response => {
              this.dateForm.responseDemo = JSON.stringify(response)
            }).catch(error => {
              this.$message.error(error)
            })
          } else if (this.dateForm.requestBodyType == 'ParamsSubmit') {
            testRequest(form.url, form.method, form.headers, form.subParams, null).then(response => {
              this.dateForm.responseDemo = JSON.stringify(response)
            }).catch(error => {
              this.$message.error(error)
            })
          }
        } else {
          this.$message.error("未输入必填写项目")
        }
      })

    },
    // 请求头添加行按钮被点击
    headerAddRow(index, row) {
      var element = {
        paramsName: null,
        paramsValue: null,
        paramsType: 'String',
        paramsDESC: null,
      }
      this.dateForm.headers.push(element)
    },
    // 请求头删除行按钮被点击
    headerDelRow(index, row) {
      // 删除当前元素
      this.$delete(this.dateForm.headers, index);
    },
    // 请求头添加行按钮被点击
    paramsAddRow(index, row) {
      var element = {
        paramsName: null,
        paramsValue: null,
        paramsType: 'String',
        paramsDESC: null,
      }
      this.dateForm.subParams.push(element)
    },
    // 请求头删除行按钮被点击
    paramsDelRow(index, row) {
      // 删除当前元素
      this.$delete(this.dateForm.subParams, index);
    },
    // 提交内容的选项卡被点击事件
    handleTabsClick() {

    },
    // JSON 数据格式化
    JSONFormart() {
      this.dateForm.requestBody = JSON.stringify(JSON.parse(this.dateForm.requestBody), null, '\t')
    },
    // 响应的JSON 数据格式化
    JSONFormartResp() {
      this.dateForm.responseDemo = JSON.stringify(JSON.parse(this.dateForm.responseDemo), null, '\t')
    },


  },
  // 页面载入完毕
  created() {

  }
}
</script>

<style scoped>
.item {

  /* 调整elementUI中样式 如果不需要调整请忽略 */
  .el-input__inner {
    height: 24px !important;
  }
}

.txt {
  line-height: 24px;
  padding: 0 9px;
  box-sizing: border-box;
}
</style>
